.deck-select-card-list-container {
  width: 100%;
  min-height: 500px;
  background: #fff;
  box-shadow: 0 0 10px 8px rgb(0 0 0 / 2%), 0 0 10px 8px rgb(0 0 0 / 2%);
  border-radius: 22px;
  margin-top: 20px;

  .tabs-area {
    width: 100%;
    height: 96px;
    border-radius: 22px;
    padding: 20px 20px 0;

    .tabs-item {
      position: relative;
      flex: 0 0 50%;
      text-align: center;
      font-size: 28px;
      line-height: 28px;
      color: #b9b9b9;
      transition: color 0.2s;

      &.active {
        color: #000;

        &::after {
          content: '';
          position: absolute;
          bottom: 25px;
          left: 50%;
          margin-left: -79px;
          width: 158px;
          height: 4px;
          background: #000;
          border-radius: 2px;
        }
      }
    }
  }

  .sel-card-area {
    padding: 0 10px;

    .sel-card-item {
      position: relative;
      margin-bottom: 20px;
      margin-right: 8px;

      &:nth-of-type(3n) {
        margin-right: 0;
      }

      .image {
        background: #4c5055;
        border-radius: 10px;
        width: 214px;

        > img {
          width: inherit;
        }
      }

      .nums {
        position: absolute;
        right: 4px;
        top: 4px;
        width: 53px;
        height: 53px;
        text-align: center;
        line-height: 53px;
        font-weight: bold;
        font-size: 32px;
        color: #fff;

        > span {
          position: relative;
          z-index: 2;
        }

        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
          background: linear-gradient(131deg, #01e7ff 0%, #073560 100%);
          border-radius: 6px;
          opacity: 0.72;
        }
      }
    }
  }
}
